<template>
  <van-nav-bar title="标题">
    <template #left>
      <van-nav-bar left-text="" left-arrow @click="onClickLeft"></van-nav-bar>
    </template>
    <template #title>
      <van-search ref='search' v-model="valueId" placeholder="请输入搜索关键词" @clear="clearList"
        @keydown.enter="onClickButton" />
    </template>
    <template #right>
      <div @click="onClickButton">搜索</div>
    </template>
  </van-nav-bar>

  <div class="hot" v-if="flag">热门搜索</div>
  <ul v-if="flag">
    <li v-for="item in SearchList" @click="handler(item.name)">{{ item.name }}</li>
  </ul>

  <div class="history" v-if="flag">历史记录</div>
  <ol v-if="flag">
    <li v-for="item in historyList" @click="handler(item)">{{ item }}</li>
  </ol>

  <div class="shops" v-for="item in filterList" v-if="!flag">
    <div class="pic">
      <img :src='item.img'>
    </div>
    <div class="text">
      <h3>{{ item.StoreName }}</h3>
      <h4>
        <b>{{ item.region + ' | ' + item.classification }}</b>
        <b>{{ item.distance }} Km</b>
      </h4>
      <h5 v-for="val in item.introduce.split('&')">{{ val }}</h5>
    </div>
  </div>
  <van-empty image="search" description="暂无商铺" v-if="filterList.length == 0 && !flag" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getSearchs, getChangeSearch } from '@/api/api'
import { useRouter } from 'vue-router'
import useZBStore from '@/pinia/index'

const router = useRouter()
const store = useZBStore()
const onClickLeft = () => {
  router.back('/home')
}

const valueId = ref('')

const SearchList = ref([])
onMounted(async () => {
  let { data } = await getSearchs()
  SearchList.value = data
})

const historyList = ref([])
const filterList = ref([])
const flag = ref(true)

const onClickButton = async () => {
  if (valueId.value && !historyList.value.includes(valueId.value)) {
    store.list.push(valueId.value)
  }
  if (valueId.value == '') {
    flag.value = true
    return
  }
  let { data } = await getChangeSearch({ keyword: valueId.value })
  filterList.value = data
  flag.value = false
}

const clearList = () => {
  flag.value = true
}

onMounted(() => {
  historyList.value = store.list
})

const search = ref()
const handler = (val) => {
  valueId.value = val
  search.value.focus()
}

</script>

<style lang="scss" scoped>
.hot {
  width: 100px;
  height: 50px;
  color: rgba(166, 166, 166, 1);
  font-size: 11px;
  line-height: 110%;
  text-align: center;
  margin: 80px 0 0 50px;
}

.history {
  width: 100px;
  height: 50px;
  color: rgba(166, 166, 166, 1);
  font-size: 11px;
  line-height: 110%;
  text-align: center;
  margin: 25px 0 10px 50px;
}

ul {
  overflow: hidden;
}

ul li {
  height: 30px;
  color: rgba(56, 56, 56, 1);
  border-radius: 11px;
  font-size: 11px;
  line-height: 110%;
  border: rgba(243, 243, 243, 1) solid 1px;
  text-align: center;
  float: left;
  margin: 25px 36px 20px 60px;
}

ol {
  overflow: hidden;
}

ol li {
  height: 30px;
  color: rgba(56, 56, 56, 1);
  border-radius: 11px;
  font-size: 11px;
  line-height: 110%;
  border: rgba(243, 243, 243, 1) solid 1px;
  text-align: center;
  float: left;
  margin: 25px 36px 20px 60px;
}

.shops {
  display: flex;
  padding: 0px 30px;
  background-color: #fff;
  margin: 20px 0px 10px 0px;
}

.pic img {
  width: 100px;
  height: 100px;
}

.shops .text h3 {
  font-size: 30px;
  margin: 10px 0px 20px 20px;
}

.shops .text h4 {
  font-size: 25px;
  margin: 0px;
  width: 540px;
  color: #a6a6a6;
  margin: 0px 0px 30px 45px;
  display: flex;
  justify-content: space-between;
}

.shops .text h4 b {
  font-weight: bold;
}

.shops .text h5 {
  font-size: 25px;
  margin: 0px;
  color: #a6a6a6;
  margin: 0px 0px 10px 45px;
}
</style>

